<template>
  <div class="layout">
    <svg-icon iconClass="close" className="layout-close" @click="winClose"/>
    
    <userInfoBox disabled />
    <payCom />
  </div>
</template>

<script setup lang="ts" name="pay">
import { onMounted, watch, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { userAppStore } from "@/stores/user";
import { systemAppStore } from "@/stores/system";
import { messageAppStore } from "@/stores/message";
import { invokeAPi, invokeAsyncAPi, registerInformApi, reportInfoApi } from "@/xz-fn";
import userInfoBox from "@/layout/components/user-info-box.vue";
import payCom from "@/components/pay/index.vue";
import eventBus from '@/utils/mitt';

const route = useRoute();
const router = useRouter();
const _systemAppStore_ = systemAppStore();
const _userAppStore_ = userAppStore();
const _messageAppStore_ = messageAppStore();
const { hasLogin, token } = storeToRefs(_userAppStore_);
const { appCfg, appInfo } = storeToRefs(_systemAppStore_);
invokeAPi("xz_page_load_finished", "XZDesktopVIPGroup");
invokeAPi("jsMsg_SetWindowSize", 960, 660);
invokeAsyncAPi('jsMsg_GetWndInfo').then(({ payload }: any) => {
  handleWinMsgParam(payload)
})
registerInformApi('Notify_WebService', (type: string, payload: any) => {
  if(type === "Notify_UserCenterParam"){
    handleWinMsgParam(payload)
  }
});
registerInformApi('Notify_WebMessage', (id: number | string, payload: any) => {
  handleWinMsgParam(payload)
});
registerInformApi("Notify_LoginStatusChange", async (status: number) => {
  if (status === 3) {
    // 登录成功
    await _userAppStore_.getToken();
    if (token.value) {
      await _userAppStore_
        .checkStatus()
        .catch(() => {});
    }
    if (token.value) {
      _userAppStore_.getUserInfo();
    }
  } else if (status === 1) {
    // 退出登录
    _userAppStore_.resetUserInfo(false);
  }
});
// eventBus.on("updateUserCoupon", handleUpdateUserCoupon)
onMounted(() => {
  if (hasLogin.value) {
    _userAppStore_.getUserInfo();
  }
  setTimeout(() => {
    invokeAPi("jsMsg_SetWndDragPos", [
      {
        left: 0,
        top: 0,
        right: window.innerWidth - 50,// 阴影10+内边距16+关闭按钮
        bottom: 50
      }
    ]);
  }, 500);
});
// onUnmounted(() => {
//   eventBus.off("updateUserCoupon", handleUpdateUserCoupon)
// });
watch(hasLogin, (val, oldVal) => {
  if(val){
    _userAppStore_.autoMutiDrawCoupon()
      .then(() => {
        // 自动领券成功
        // eventBus.emit("updateUserCoupon") 由fq_NotifyWebMessageEx代替
        invokeAPi("fq_NotifyWebMessageEx", "", JSON.stringify({action: "user-coupon-change"}))
      })
      .catch(() => {
        if(typeof oldVal === 'undefined'){
          // 第一次加载
          // _userAppStore_.getMyCoupons() //#test 页面无展示，可不请求 
        }else{
          // 登录成功
          eventBus.emit("updateUserCoupon")
        }
      })
  }else if(!val && typeof oldVal !== 'undefined'){
    // 非第一次加载的退登
    eventBus.emit("updateUserCoupon")
  }
}, { immediate: true });

reportInfoApi(61);

function winClose() {
  invokeAPi("jsMsg_SetWndStatus", 0, true);
}
function handleWinMsgParam(str: any){
  let params
  try {
    params = typeof str === 'string' ? JSON.parse(str) : str
  }catch (e) {
    params = null
  }
  if(!params){
    return
  }

  if(params.pay){
    _messageAppStore_.onOpenPayTabNotice(params.pay)
  }

  if(params.action){
    switch(params.action){
      case 'tsb-change':
        // params.data.type === "pay-success" // 购买成功
        // params.data.type === "consume" // 消费
        _userAppStore_.setTsbCount(params.data.count)
        break
      case 'member-change':
        // params.data.type === "pay-success" // 购买成功
        _userAppStore_.setUserInfo(params.data.info)
        break
      case 'user-coupon-change':
        eventBus.emit("updateUserCoupon")
        break
      case 'bindSuccess':
        _userAppStore_.getUserInfo()
        break
      default: break
    }
  }
}
// function handleUpdateUserCoupon(){
//   _userAppStore_.getMyCoupons() //#test 页面无展示，可不请求 
// }
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 20px);
  background: #fff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  
}
.layout-close{
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 24px;
  cursor: pointer;
  &:hover {
    background: rgba(76,84,123,0.1);
    border-radius: 4px;
  }
}
.user-box{
  border-bottom: 1px solid rgba(0,0,0,0.1);
  border-radius: 0;
}
</style>
<style lang="scss">
#app{
  padding: 10px;
}
</style>
